declare module 'lodash-es';

<script setup lang="ts">
import { cloneDeep, debounce } from "lodash-es";
import type { UnwrapRef } from "vue";
import { onMounted, reactive, ref } from "vue";
import { addInfoRequest, hotPathSelectAll } from "@/api/hotPath";
import { message } from "ant-design-vue";
import {
  equipmentAdd,
  equipmentDelete,
  equipmentSelectAll,
  equipmentUpdate,
} from "@/api/equipment";
import { getEzConfigVO, updateConfig } from "@/api/ezConfig";
import { PlusOutlined, CloseOutlined } from "@ant-design/icons-vue";
import { materialInfoDeleteRequest } from "@/api/materialInfo";
import { materialAddRequest, materialDeleteRequest } from "@/api/material";

const hotPathList = ref([]);
const fetchHotPathConfig = async () => {
  const res = await hotPathSelectAll();
  hotPathList.value = res.data;
};

const loadHotPathConfig = debounce(fetchHotPathConfig, 300);

onMounted(async () => {
  await loadHotPathConfig();
  const resConfig = await getEzConfigVO();
  const res = await equipmentSelectAll();
  equipmentDataSource.value = res.data;
  ezConfig.value = resConfig.data;
});
//其他配置
const ezConfig = ref({
  login: "",
  orderInfo: "",
  sharedFolder: "",
  sourceFolder: "",
});
//设备
const equipmentColumns = [
  {
    title: "设备ID",
    dataIndex: "equipmentID",
    width: "15%",
  },
  {
    title: "设备名",
    dataIndex: "equipmentName",
    width: "25%",
  },
  {
    title: "操作",
    dataIndex: "operation",
  },
];
//删除设备
const deleteEquipment = async (id: number) => {
  const delRes = await equipmentDelete({
    id: id,
  });
  if (delRes) {
    message.success("删除成功");
    const res = await equipmentSelectAll();
    equipmentDataSource.value = res.data;
  }
};
const equipmentOpen = ref<boolean>(false);
const equipmentInfo = ref({
  id: "",
  equipmentID: "",
  equipmentName: "",
});
const showEquipmentModal = () => {
  equipmentOpen.value = true;
};
const equipmentHandleOk = async () => {
  await equipmentAdd({
    equipmentID: equipmentInfo.value.equipmentID,
    equipmentName: equipmentInfo.value.equipmentName,
  });
  equipmentOpen.value = false;
  const res = await equipmentSelectAll();
  equipmentDataSource.value = res.data;
};

//-------------------------------------

interface equipmentDataItem {
  id: string;
  equipmentID: string;
  equipmentName: symbol;
}

const equipmentData: equipmentDataItem[] = [];

const equipmentDataSource = ref(equipmentData);
const equipmentEditableData: UnwrapRef<Record<string, equipmentDataItem>> =
  reactive({});
const equipmentEdit = (id: string) => {
  equipmentEditableData[id] = cloneDeep(
    equipmentDataSource.value.filter((item) => id === item.id)[0]
  );
};
//编辑设备信息
const equipmentSave = async (id: string) => {
  Object.assign(
    equipmentDataSource.value.filter((item) => id === item.id)[0],
    equipmentEditableData[id]
  );
  const res = await equipmentUpdate({
    id: equipmentEditableData[id].id,
    equipmentID: equipmentEditableData[id].equipmentID,
    equipmentName: equipmentEditableData[id].equipmentName,
  });
  if (res) {
    message.success("修改成功");
    delete equipmentEditableData[id];
  }
};
const equipmentCancel = (id: string) => {
  delete equipmentEditableData[id];
};
//添加路径
const open = ref<boolean>(false);

const showModal = () => {
  open.value = true;
};

const handleOk = async () => {
  const res = await materialAddRequest(formState.value);
  if (res) {
    message.success("添加成功");
    open.value = false;
  }
  await loadHotPathConfig();
};

interface FormState {
  material: string;
}

const formState = ref<FormState>({
  material: "",
});
//删除热文件夹配置
const deleteHotPath = async (id: number) => {
  const delRes = await materialDeleteRequest({
    id: id,
  });
  if (delRes) {
    message.success("删除成功");
    await loadHotPathConfig();
  }
};

//编辑配置
const openEdit = ref<boolean>(false);
const showModalEdit = () => {
  openEdit.value = true;
};
const handleOkEdit = async () => {
  const res = await updateConfig({
    ...ezConfig.value,
  });
  if (res) {
    message.success("修改成功");
    openEdit.value = false;
    ezConfig.value = res.data;
  }
};
const addInfoOpen = ref<boolean>(false);
const addInfo = ref({
  height: "",
  path: "",
  weight: "",
  width: "",
  materialId: "",
  printSide: "0",
});
const title = ref("");
const showAddInfo = (hotPath: any) => {
  addInfoOpen.value = true;
  addInfo.value.materialId = hotPath.id;
  title.value = hotPath.material;
};
const doAddInfo = async () => {
  const res = await addInfoRequest(addInfo.value);
  if (res) {
    message.success("添加成功");
    addInfoOpen.value = false;
    await loadHotPathConfig();
  }
};
//删除一条热文件夹配置
const deleteMaterialInfo = async (id: number) => {
  const res = await materialInfoDeleteRequest({
    id: id,
  });
  if (res) {
    message.success("删除成功");
    await loadHotPathConfig();
  }
};
</script>

<template>
  <a-collapse>
    <a-collapse-panel key="1" header="其他">
      <a-button type="dashed" @click="showModalEdit">编辑</a-button>
      <a-modal v-model:open="openEdit" title="编辑" @ok="handleOkEdit">
        <a-form-item label="登陆地址">
          <a-input v-model:value="ezConfig.login" />
        </a-form-item>
        <a-form-item label="查询地址">
          <a-input v-model:value="ezConfig.orderInfo" />
        </a-form-item>
        <a-form-item label="共享文件目录">
          <a-input v-model:value="ezConfig.sharedFolder" />
        </a-form-item>
        <a-form-item label="移动后文件目录">
          <a-input v-model:value="ezConfig.sourceFolder" />
        </a-form-item>
      </a-modal>
      <p></p>
      <a-descriptions size="small">
        <a-descriptions-item label="登录地址"
          >{{ ezConfig.login || "未设置" }}
        </a-descriptions-item>
        <a-descriptions-item label="查询地址"
          >{{ ezConfig.orderInfo || "未设置" }}
        </a-descriptions-item>
        <a-descriptions-item label="共享文件目录"
          >{{ ezConfig.sharedFolder || "未设置" }}
        </a-descriptions-item>
        <a-descriptions-item label="移动后文件目录"
          >{{ ezConfig.sourceFolder || "未设置" }}
        </a-descriptions-item>
      </a-descriptions>
    </a-collapse-panel>
    <a-collapse-panel key="2" header="热文件夹设置">
      <a-button type="dashed" @click="showModal">添加</a-button>
      <p></p>
      <a-modal v-model:open="open" title="添加" @ok="handleOk">
        <a-form-item label="材料" name="material">
          <a-input v-model:value="formState.material" placeholder="输入材料" />
        </a-form-item>
      </a-modal>
      <div class="card-container">
        <a-card
          v-for="item in hotPathList"
          :key="item.id"
          :title="item.material"
          style="width: 350px; height: 400px; padding-bottom: 40px"
        >
          <template #extra>
            <a-button danger type="link" @click="deleteHotPath(item.id)">
              删除
            </a-button>
          </template>
          <div style="overflow: auto; max-height: 300px; overflow-x: hidden">
            <a-empty v-if="!item.infoList || item.infoList.length === 0" />
            <div v-for="info in item.infoList" :key="info.weight">
              <a-row>
                <a-col :span="20"
                  >参数：{{ info.weight || "" }}<span v-if="info.weight">*</span
                  >{{ info.height || "" }}/{{ info.width || ""
                  }}<span v-if="info.width">G</span>
                  {{ info.printSide === 0 ? "单面" : "双面" }}
                </a-col>
                <a-col :span="4">
                  <a-button type="text" @click="deleteMaterialInfo(info.id)">
                    <template #icon>
                      <CloseOutlined />
                    </template>
                  </a-button>
                </a-col>
                路径：
                <span style="color: green">{{ info.path || "无" }}</span>
              </a-row>
              <a-divider style="margin-bottom: 5px; margin-top: 10px" dashed />
            </div>
          </div>
          <a-button
            type="dashed"
            @click="showAddInfo(item)"
            style="position: absolute; bottom: 5px; left: 5px"
          >
            <template #icon>
              <PlusOutlined />
            </template>
          </a-button>
        </a-card>
      </div>
    </a-collapse-panel>
    <a-collapse-panel key="3" header="设备关联设置">
      <a-button type="dashed" @click="showEquipmentModal">添加</a-button>
      <p></p>
      <a-modal
        v-model:open="equipmentOpen"
        title="添加"
        @ok="equipmentHandleOk"
      >
        <a-form-item label="设备ID" name="equipmentID">
          <a-input v-model:value="equipmentInfo.equipmentID" />
        </a-form-item>

        <a-form-item label="设备名" name="equipmentName">
          <a-input v-model:value="equipmentInfo.equipmentName" />
        </a-form-item>
      </a-modal>
      <a-table
        :columns="equipmentColumns"
        :data-source="equipmentDataSource"
        :pagination="false"
        size="small"
      >
        <template #bodyCell="{ column, text, record }">
          <template
            v-if="['equipmentID', 'equipmentName'].includes(column.dataIndex)"
          >
            <div>
              <a-input
                v-if="equipmentEditableData[record.id]"
                v-model:value="
                  equipmentEditableData[record.id][column.dataIndex]
                "
                style="margin: -5px 0"
              />
              <template v-else>
                {{ text }}
              </template>
            </div>
          </template>
          <template v-else-if="column.dataIndex === 'operation'">
            <div class="editable-row-operations">
              <span v-if="equipmentEditableData[record.id]">
                <a-typography-link @click="equipmentSave(record.id)"
                  >保存</a-typography-link
                >
                &nbsp;&nbsp;
                <a-popconfirm
                  title="确认取消?"
                  @confirm="equipmentCancel(record.id)"
                >
                  <a>取消</a>
                </a-popconfirm>
              </span>
              <span v-else>
                <a @click="equipmentEdit(record.id)">编辑</a>
                <a-button danger type="link" @click="deleteEquipment(record.id)"
                  >删除</a-button
                >
              </span>
            </div>
          </template>
        </template>
      </a-table>
    </a-collapse-panel>
  </a-collapse>
  <!--  添加一条热文件夹配置信息-->
  <a-modal
    v-model:open="addInfoOpen"
    :title="title"
    @ok="doAddInfo"
    style="width: 300px"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
  >
    <a-form name="basic" autocomplete="off">
      <a-form-item label="宽">
        <a-input v-model:value="addInfo.width" placeholder="宽" />
      </a-form-item>
      <a-form-item label="高">
        <a-input v-model:value="addInfo.height" placeholder="高" />
      </a-form-item>
      <a-form-item label="克重">
        <a-input v-model:value="addInfo.weight" placeholder="克重" />
      </a-form-item>
      <a-form-item label="路径">
        <a-input v-model:value="addInfo.path" placeholder="路径" />
      </a-form-item>
      <a-form-item>
        <a-select
          ref="select"
          v-model:value="addInfo.printSide"
          style="width: 120px"
        >
          <a-select-option value="0">单面</a-select-option>
          <a-select-option value="1">双面</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style scoped>
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
</style>
